import React, { Component } from "react";
import {
    Button,
    Flex,
    InputItem,
    WhiteSpace,
    WingBlank,
    Toast,
} from "antd-mobile";
import http from "../../http";

class Login extends Component {
    state = {
        mobile: "",
        code: "",
        btnText: "获取验证码",
        isClicked: false,
    };

    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.onGetCode = this.onGetCode.bind(this);
    }

    async login() {
        const { mobile, code } = this.state;
        const res = await http.post("/login", { mobile, code });
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        // 保存登录数据
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("user", JSON.stringify(res.data.user));
        // 跳转到后端首页
        this.props.history.push("/main/home");
    }

    onGetCode() {
        if (!this.state.mobile) {
            Toast.fail("手机号不能为空");
            return;
        }

        // 已经点击了，不往下走了
        if (this.state.isClicked) {
            return;
        }
        this.getCode();
        this.setState({ isClicked: true });
        let seconds = 59;
        this.setState({ btnText: `重新获取验证码 (${seconds}s)` });
        let intervalId = setInterval(() => {
            seconds--;
            if (seconds > 0) {
                this.setState({ btnText: `重新获取验证码 (${seconds}s)` });
            } else {
                clearInterval(intervalId);
                this.setState({ btnText: "获取验证码" });
                this.setState({ isClicked: false });
            }
        }, 1000);
    }

    async getCode() {
        const res = await http.get(`/codes/${this.state.mobile}`);
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        Toast.success("验证码发送成功");
    }

    render() {
        return (
            <div className="login">
                <WingBlank size="sm">
                    <h3
                        style={{
                            textAlign: "center",
                            color: "#333",
                            marginTop: "35%",
                        }}
                    >
                        投票系统登录
                    </h3>

                    <WhiteSpace size="lg" />

                    <InputItem
                        placeholder="手机号"
                        onChange={(mobile) => this.setState({ mobile })}
                    />

                    <WhiteSpace />

                    <Flex justify="between">
                        <InputItem
                            placeholder="输入验证码"
                            onChange={(code) => this.setState({ code })}
                        />
                        <Button
                            type="ghost"
                            style={{ padding: "0 10px" }}
                            onClick={this.onGetCode}
                            disabled={this.state.isClicked}
                        >
                            {this.state.btnText}
                        </Button>
                    </Flex>

                    <WhiteSpace size="lg" />

                    <Button onClick={this.login}>登录</Button>
                </WingBlank>
            </div>
        );
    }
}

export default Login;
